<template>
  <div class="metaCustomTable">
    <div class="metaCustomTable_header">
      <div
        class="metaCustomTable_headerItem"
        v-for="(item, index) in displayItem"
        :key="index"
        :style="
          item.width && item.width !== '' ? 'width: ' + item.width + 'px;' : 'flex: 1;'
        "
      >
        <div class="metaCustomTable_headerItemText">{{ item.label }}</div>
      </div>
    </div>
    <div class="metaCustomTable_table">
      <div
        class="metaCustomTable_tableItem"
        v-for="dataItem in dataList"
        :key="dataItem.id"
        :style="dataList.length < 10 ? 'max-height: 80px;' : ''"
      >
        <div class="metaCustomTable_tableItemBg">
          <div
            class="metaCustomTable_tableItemCol"
            v-for="(item, index) in displayItem"
            :key="index"
            :style="
              (item.width && item.width !== ''
                ? 'width: ' + item.width + 'px;'
                : 'flex: 1;') +
              (item.bgColor && item.bgColor !== ''
                ? 'background-color: ' + item.bgColor
                : '')
            "
          >
            <div v-if="item.type === 'time'" class="metaCustomTable_tableItemColText">
              {{ dataFormat(dataItem[item.key], item.format) }}
            </div>
            <div
              v-else-if="item.type === 'splicing'"
              class="metaCustomTable_tableItemColText"
            >
              <template v-for="keyItem in item.key"
                >{{ dataItem[keyItem] }}&nbsp;</template
              >
            </div>
            <div
              v-else-if="item.type === 'status'"
              class="metaCustomTable_tableItemColText"
            >
              <div
                v-if="item.color"
                class="metaCustomTable_tableItemColCircle"
                :style="'background-color:' + item.color[dataItem[item.key]]"
              ></div>
            </div>
            <div
              v-else-if="item.type === 'select'"
              class="metaCustomTable_tableItemColText"
              :style="'color: ' + item.color[dataItem[item.key]]"
            >
              {{ item.format[dataItem[item.key]] }}
            </div>
            <div v-else class="metaCustomTable_tableItemColText">
              {{ dataItem[item.key] }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import utils from "@/utils/utils";
import deepClone from "@/utils/deepClone";
export default {
  name: "MetaCustomTable",
  components: {},
  props: {
    displayItem: {
      type: Array,
      default: [
        {
          label: "设备名称",
          key: "equipment_name",
        },
        {
          label: "客户",
          key: "customer",
        },
        {
          label: "设备位置",
          type: "splicing",
          key: ["province", "city", "area"],
        },
        {
          label: "时间",
          type: "time",
          key: "time",
          format: "yyyy-MM-dd hh:mm:ss",
        },
        {
          label: "报警状态",
          type: "status",
          key: "alarmStatus",
        },
        {
          label: "报警等级",
          key: "level",
          // type: 'combination',
          // prop: 'children',
          // num: 4
        },
      ],
    },
    dataList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    dataFormat(cellValue, format) {
      return utils.formatDate(format, new Date(parseInt(cellValue)));
    },
  },
};
</script>
<style lang="less">
.metaCustomTable {
  width: 100%;
  float: left;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: 0 100px 80px;
  .metaCustomTable_header {
    width: 100%;
    display: flex;
    height: 66px;
    .metaCustomTable_headerItem {
      // flex: 1;
      display: flex;
      overflow: hidden;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      .metaCustomTable_headerItemText {
        overflow: hidden;
        text-overflow: ellipsis;
        // display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: white;
        font-size: 18px;
        line-height: 18px;
        text-align: center;
      }
    }
  }
  .metaCustomTable_table {
    width: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
    box-sizing: border-box;
    .metaCustomTable_tableItem {
      width: 100%;
      flex: 1;
      box-sizing: border-box;
      padding-bottom: 10px;
      .metaCustomTable_tableItemBg {
        background-color: #000;
        box-shadow: 1px 1px 2px rgba(22, 37, 91, 0.3);
        border-radius: 10px;
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        .metaCustomTable_tableItemCol {
          // flex: 1;
          overflow: hidden;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-shrink: 0;
          .metaCustomTable_tableItemColText {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            color: white;
            font-size: 16px;
            line-height: 16px;
            text-align: center;
            word-break: break-all;
            .metaCustomTable_tableItemColCircle {
              width: 30px;
              height: 30px;
              border-radius: 30px;
            }
          }
        }
      }
    }
  }
}
</style>
